import styled from 'styled-components'
import img from '@img/all.png'
import vmpAddImg from '@img/vmp-add.png'
export const StyledErrorTipWrap = styled.div`
	border: 1px solid #999;
	height: 45px;
	line-height: 45px;
	padding: 0px 16px;
	background: white;
	font-size: 12px;
`
/**正常包裹框 */
export const Wrap = styled.div`
	position: relative;
	&.active,
	&:hover {
		.operate {
			display: block !important;
		}
	}
	.operate {
		display: none !important;
	}
`
export const StyledNormalWrap = styled.div<{
	left: number
	width: number
	top: number
	height: number
	disabled: boolean
	mode: number
}>`
	border: 1px solid #ddd;
	color: #333;
	position: absolute;
	left: ${(props) => props.left + 'px'};
	top: ${(props) => props.top + 'px'};
	width: ${(props) => props.width + 'px'};
	height: ${(props) => props.height + 'px'};
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: ${(props) => (props.disabled || props.mode === 2 ? 'rgba(0,0,0,0.05)' : 'rgb(249, 249, 249)')};
	.name-ellipsis {
		text-align: center;
	}
	.errorMark {
		cursor: pointer;
		background: url(${img}) no-repeat scroll 0 -1032px #fff;
		height: 18px;
		left: 0;
		position: absolute;
		top: 0;
		width: 18px;
		position: absolute;
		.tv-box-net-error {
			font-size: 12px;
			text-align: left;
			color: #333;
			cursor: pointer;
			box-sizing: content-box;
			margin: 0;
			padding: 0;
			height: 50px;
			line-height: 50px;
			position: absolute;
			top: 22px;
			left: 19px;
			z-index: 3;
			border: 1px solid #999;
			background: none repeat scroll 0 0 white;
			display: inline-block;
			min-width: 220px;
			.error-img {
				margin: 0;
				display: inline-block;
				background: url(${img}) no-repeat scroll -25px -249px #fff;
				cursor: pointer;
				height: 13px;
				padding: 0;
				position: absolute;
				right: 5px;
				top: 5px;
				width: 13px;
			}
		}
	}
`
/**异常包裹框 */
export const StyledAbnormalWrap = styled.div<{ left: number; width: number; top: number; height: number }>`
	border: 1px solid #ddd;
	color: #333;
	background: #eeeeee !important;
	position: absolute;
	left: ${(props) => props.left + 'px'};
	top: ${(props) => props.top + 'px'};
	width: ${(props) => props.width + 'px'};
	height: ${(props) => props.height + 'px'};
	display: flex;
	align-items: center;
	justify-content: center;
`
export const StyledWrap = styled.div`
	.dynamic-view {
		height: 300px;
		line-height: 300px;
		text-align: center;
		width: 520px;
		border: 1px dashed #bababa;
		margin: 40px 0 10px;
	}
`
/**拖拽按钮*/
export const AddIcon = styled.div`
	width: 17px;
	height: 17px;
	background: url(${vmpAddImg}) no-repeat;
`
/**以下状况使用此按钮
 * 第一种：尚未配置任何电视墙通道，请联系管理员!
 * 第二种：HDU不在线
 * 第三种：通道不可用
 */
export const CannotUseIcon = styled.div`
	width: 19px;
	height: 19px;
	background: url(${img}) no-repeat no-repeat scroll -18px -1032px #ececec;
`
/**被占用其他会议正在使用此通道*/
export const OccupiedIcon = styled.div`
	background: url(${img}) no-repeat 0 -1010px #eeeeee;
	height: 22px;
	width: 29px;
`
